<template>
	<div class="component-container">
		<div class="component-container__main">
			<el-form ref="dataFormRef" :rules="rules" :model="formData" label-width="120px">
				<el-form-item label="OpenApi网址" prop="url">
					<el-input style="width: 500px" v-model="formData.url" @blur="checkUrl" />
					<el-button type="primary" @click="parseOpenApi">解析</el-button>
				</el-form-item>
			</el-form>
			<el-cascader-panel ref="cascaderRef" :options="cascaderOptions" size="large" :props="{emitPath:true }" @change="handleCascaderChange" />
		</div>
		<div class="component-container__footer"><el-button type="primary" @click="handleNext">下一步，生成页面</el-button></div>
		<div style="margin-top: 20px">
			<el-link type="info" :underline="false" v-show="pathLabels.length > 0">您选择的生成页面对象:</el-link>
			<el-link type="danger" :underline="false" v-for="(item, index) in pathLabels" :key="index" style="margin-left: 5px">
				{{ item }}
				<CaretRight v-show="index < pathLabels.length - 1" style="width: 1em; height: 1em; margin-left: 5px" />
			</el-link>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, nextTick, reactive, ref, toRefs } from 'vue';
import { ElForm, ElMessage, ElCascaderPanel } from 'element-plus';
import { Option } from '@/types/common';
// API 引用
import { ajax_request } from '@/codegen/api/index';
import { computed } from '@vue/reactivity';

const emit = defineEmits(['next', 'update:modelValue']);
const dataFormRef = ref(ElForm);
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
});

const pageInfo: any = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value);
  },
});

const state = reactive({
	formData: { url: import.meta.env.VITE_APP_BASE_API+"/swagger/v1/swagger.json"},
	rules: {
		url: [{ required: true, message: '请填写OpenApi完整网址', trigger: 'blur' }]
	},
	cascaderOptions: [] as Option[],
	pathLabels: []
});
const { rules, formData, cascaderOptions, pathLabels } = toRefs(state);
function checkUrl(){	
	//sstate.formData.url=state.formData.url+"/swagger/v1/swagger.json"
}
function parseOpenApi() {
	dataFormRef.value.validate((valid: any) => {
		if (valid) {
			ajax_request(state.formData.url).then(r => {
				pageInfo.openapiData=r.data.data;
				state.cascaderOptions = parseData(r.data.data);
				//console.log(parseData(r.data.data))
			});
		}
	});
}
function parseData(data: any): Option[] {
	var ret = [];
	var ops = [{ value: 'list', label: '生成列表页面（增加/修改在同一页面）' }, 
	{ value: 'list2', label: '生成列表页面（增加/修改在不同页面）' }, 
	{ value: 'addAndUpdate', label: '生成增加修改页面（单独于列表页面）' },	
	{ value: 'get', label: '生成详情页面（get）' }];
	for (let i in data.tags) {
		var item = {
			value: data.tags[i].name,
			label: data.tags[i].name
		} as Option;
		/*
		var children = [];
		var name = data.tags[i].name;
		for (let j in data.paths) {
			//console.log(Object.keys(data.paths[j]))
			//console.log(Object.values(data.paths[j])[0].tags)
			var k = Object.keys(data.paths[j]);
			var pathValue = Object.values(data.paths[j])[0];
			var summary = pathValue.summary;
			var tags = pathValue.tags;
			if (tags.includes(name)) {
				var item2 = {
					value: j,
					label: summary + `(${k}:${j})`
				};
				item2.children = ops;
				children.push(item2);
			}
		}
		item.children = children;*/
		item.children = ops;
		ret.push(item);
	}
	return ret;
}
function handleNext() {
	if (!pageInfo.value.op) {
		ElMessage.warning('请选择生成页面操作');
		return false;
	}
	emit('next');
}
const cascaderRef = ref(ElCascaderPanel);
function handleCascaderChange() {
	const checkNodes=cascaderRef.value.getCheckedNodes();
	const checkNode = checkNodes[0];
	state.pathLabels = checkNode.pathLabels; // 商品分类选择层级提示
	
	var data=pageInfo.openapiData;	
	var urls=[],tagName=checkNode.pathValues[0];
	for (let j in data.paths) {
		//console.log(Object.keys(data.paths[j]))
		//console.log(Object.values(data.paths[j])[0].tags)
		var k = Object.keys(data.paths[j]);
		var pathValue = Object.values(data.paths[j])[0];
		var summary = pathValue.summary;
		var tags = pathValue.tags;
		if (tags.includes(tagName)) {
			var item2 = {
				value: j,
				label: summary + `(${k}:${j})`
			};
			urls.push(item2);			
			//console.log(item2)
			//item2.children = ops;
			//children.push(item2);
		}
	}
	//pageOpt.urls=urls;
	pageInfo.value.tag=checkNode.pathValues[0];
	pageInfo.value.op=checkNode.pathValues[1];
	pageInfo.value.urls = urls;
}
onMounted(() => {});
</script>

<style lang="scss" scoped>
.component-container {
	&__main {
		margin: 20px auto;
	}

	&__footer {
		position: fixed;
		bottom: 20px;
		right: 20px;
	}
}
</style>
